<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/vue.min.js"></script>
		<title>模拟POST测试工具</title>
	</head>
	<body>
		<div class="app container-fluid">
			<div class="row">
				<div class="col-md-12">
					<h1>模拟POST或GET工具</h1>
				</div>
				<div class="col-md-12" style="border-bottom: #b5b5b5 solid 1px;margin-bottom: 10px;">
					<!-- 下划线 -->
				</div>
				<div class="col-md-5">
					<form class="form-inline" style="margin-bottom:10px ;">
						<div class="form-group">
							<label>输入URL</label>
							<input  v-model="url" class="form-control" />
						</div>
					</form>
					<table class="table">
						<tr>
							<th>编号</th>
							<th>Key</th>
							<th>Value</th>
							<th>操作</th>
						</tr>
						<tr v-for="(item,index) in requestlist">
							<th>{{index}}</th>
							<td><input type="text" name="key" v-model="item.key" class="form-control" /> </td>
							<td><input type="text" name="value" v-model="item.value" class="form-control" /></td>
							<td>
								<button class="btn btn-danger" @click="del_requestlist(index)">删除</button>
							</td>
						</tr>
						<tr>
							<td>
								<button class="btn btn-success" @click="add_requestlist()">添加</button>
							</td>
						</tr>
					</table>
					<button class="btn btn-primary btn-lg btn-block" @click="ajax_request()">执行请求</button>
				</div>
				<div class="col-md-5 col-lg-offset-1"  style="border-radius: 5px 5px 5px 5px;background: #efefef;min-height: 300px;">
					{{output}}
				</div>
				
			</div>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:'.app',
			data:{
				requestlist:[{
					"key":'test',
					"value":"testvalue"
				}],
				url:'http://127.0.0.1:80',
				output:"请在左侧填写URL和data内容",
			},
			methods:{
				del_requestlist:function(index){
					this.requestlist.splice(index,1)
				},
				add_requestlist:function(){
					this.requestlist.push({
						'key':'',
						"value":''
					})
				},
				ajax_request:function(){
					request={}
					url=this.url
					that=this
					for (item in this.requestlist){
						request[this.requestlist[item].key]=this.requestlist[item].value
					}
					$.post(url,request,function(returndata){
						that.output=returndata
					})
				}
			}
		})
	</script>
</html>
